// 初始化echaste实例
function test1() {
    var myChart = echarts.init(document.getElementById('test'))
    // 调用实例中的setOption方法绘制图表
    // 
    myChart.setOption({
        tooltip: {
            trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
            axisPointer: { //坐标轴指示器，坐标轴触发有效，
                type: 'shadow'//默认为line，line直线，cross十字准星，shadow阴影
            }
        },
        // 上面标签1，标签2，标签3的样式
        legend: {
            textStyle: {
                color: "#aaa"
            },//标签颜色
            itemHeight: 10, //修改icon图形大小
            itemWidth: 10,//标签的宽高度
            top: 25,//标签间距
        },
        // grid只适用于直角坐标系！
        grid: {//整个表格在容器中的位置
            left: '4%', //图表距离容器左侧多少距离
            right: '6%', //图表距离容器右侧侧多少距离
            bottom: '20%', //图表距离容器上面多少距离
            containLabel: true//防止标签溢出x轴和轴
        },
        // x轴属性
        xAxis: [
            {
                type: 'category',// 坐标轴类型，支持+value+对应数值轴、category+对应类目轴、time对应时间轴、log对应对数轴。
                data: ['字段1', '字段2', '字段3', '字段4', '字段5', '字段6', '字段7', '字段8', '字段9']
                //axisLabel+：坐标轴刻度标签，其具体属性可以参见bel。
                , axisLabel: {
                    show: true,//是否展示坐标刻度
                    textStyle: {//刻度属性
                        color: '#a0b7d1',
                        fontSize: '16px'
                    },
                    // x轴文字纵向排列
                    formatter: function (params) {
                        // 更改x轴文字排列方式
                        // params为x轴文字内容
                        //可自定义设置每行展示的字数，每行n个文字纵向排列
                        let n = 1;
                        let arr = [];
                        for (let i = 0; i < params.length / n; i++) {
                            arr.push(params.substring(n * i, n * (i + 1)));
                        }
                        return arr.join(',').split(",").join("\n");

                        // 每行单个文字纵向排列
                        // return params.split("").join("\n");
                    },

                }
            }
        ],
        // y轴属性设置
        yAxis: [
            {
                type: 'value',//支持+value+对应数值轴
                // min: '-500',// y轴最小值
                // max: '3000', // y轴最最大值
                // splitNumber: 7,// 刻度个数
                //axisLabel+：坐标轴刻度标签，其具体属性可以参见bel。
                axisLabel: {
                    show: true,
                    textStyle: {//y轴字体属性
                        color: '#a0b7d1',
                        fontSize: '16px',
                        fontWeight: '500'
                    }
                },
                splitLine: { // 背景线设置
                    show: true,//是否展示背景线
                    lineStyle: {//背景线属性
                        //   type: 'dashed',//设置为虚线默认是实线
                        color: '#1e4980'
                    }
                },
                //   轴线调整
                axisLine: {
                    show: false,//是否显示角度轴的轴线
                    lineStyle: {//角度轴线的样式
                        color: '#153978',//刻度线的颜色
                        //   opacity:0-1,轴线透明度调整
                    }
                },
                label: {//坐标轴指示器的文本标签
                    show: true,//是否展示
                    position: 'center',//标签的位置 
                    textStyle: {//标签的样式
                        color: '#fff',
                        fontSize: '20',
                        fontWeight: '400'
                    }
                },
            }
        ],
        series: [
            {
                name: '字段1',
                type: 'bar',//类型，柱状图
                //axisLabel+：坐标轴刻度标签，其具体属性可以参见bel。
                stack: 'Ad',//柱状图的数据堆叠，同个类目轴上柱状图配置相同的 stack 值可以堆叠放置。stack 值的类型为 string，默认状态下为 null。
                barWidth: 35,//更改柱状图柱子宽度
                itemStyle: {//自定义特殊 itemStyle，仅对该数据项有效
                    normal: { color: '#91cc75' }
                },
                //做到堆叠柱状图的时候 ， 由于很多的信息容易看混 ，可以用上 series 里的 emphasis 去淡化周围的，显示自己想看的那一项具体的信息。就是你鼠标放到一项数据上的时候，其他数据淡化，凸显你当下想看的这个数据
                emphasis: {//series 中的 emphasis 用的比较多的两种属性 focus,blurScope
                    // focus ：在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。
                    // none        不淡出其它图形，默认使用该配置
                    // self          只聚焦（不淡出）当前高亮的数据的图形
                    // series      聚焦当前高亮的数据所在的系列的所有图形
                    focus: 'series'
                },
                // 与x轴data值一一对应，柱状图中的数据内容数组，是一个 Object。数组项通常为具体的数据项。通常来说，数据用一个二维数组表示。如下，每一列被称为一个『维度』。
                // data: [[0,130],[1, 500],[2, 450],[3, 150],[4, 400],[5, 50],[6, 200], [7,200],[8,2250]]
                data: [130, 500, 450, 150, 400, 50, 188, 172, 2295]

            },
            {
                name: '字段2',
                type: 'bar',
                stack: 'Ad',
                itemStyle: {
                    normal: { color: '#f5804d' }

                },
                emphasis: {
                    focus: 'series'
                },
                data: [70, -80, 80, 80, 100, 60, 61, -8, 253]
            },
            {
                name: '字段3',
                type: 'bar',
                stack: 'Ad',
                itemStyle: {
                    normal: { color: '#5470c6' }
                },
                emphasis: {
                    focus: 'series'
                },
                data: [0, 0, -120, 0, 0, 60, -3, 8, -69]
            }

        ]
    })
}
test1()